import Tabs, { TabsProps } from '@/components/Tabs';
import { deviceTreeControllerDeviceTree } from '@/services/ess/deviceTree';
import { useIntl, useSearchParams } from '@umijs/max';
import React, { useEffect, useState } from 'react';
import { useModel } from 'umi';
import Chart from './components/Chart';
import List from './components/List';
import { OverviewOfStrategyExecution } from './components/OverviewOfStrategyExecution';

// const stationAreaId = -1;

const Index: React.FC = () => {
  const intl = useIntl();
  const [areaList, setAreaList] = useState([]);
  const { isArea } = useModel('@@initialState')?.initialState || {};
  //const [stationAndAreaList, setStationAndAreaList] = useState([]);
  useEffect(() => {
    if (isArea) {
      deviceTreeControllerDeviceTree({ needGroupNode: false, treeLevel: 2 }).then((res) => {
        if (res?.success) {
          setAreaList(
            [...(res?.data?.subDevices ?? [])].map((item) => {
              return {
                value: item.areaId,
                label: item.deviceName,
              };
            }),
          );
          // setStationAndAreaList([
          //   { deviceName: intl.formatMessage({
          //     id: 'global.plant',
          //   }), areaId: stationAreaId, isStation: true },
          //   ...(res?.data?.subDevices ?? []),
          // ].map(item => {
          //   return {
          //     value: item.areaId,
          //     label: item.deviceName
          //   }
          // }));
        } else {
          setAreaList([]);
          //setStationAndAreaList([]);
        }
      });
    }
  }, []);
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: intl.formatMessage({
        id: 'strategyControl.strategyTracking.overviewOfStrategyExecution',
      }),
      children: <OverviewOfStrategyExecution areaList={areaList} />,
    },
    {
      key: '2',
      label: intl.formatMessage({
        id: 'strategyControl.strategyTracking.graph',
      }),
      children: <Chart areaList={areaList} />,
    },
    {
      key: '3',
      label: intl.formatMessage({
        id: 'strategyControl.strategyTracking.list',
      }),
      children: <List areaList={areaList} />,
    },
  ];

  const [searchParams, setSearchParams] = useSearchParams();
  const activeKey = searchParams.get('tab') || items[0].key;

  const handleTabChange = (key: string) => {
    const newParams = new URLSearchParams(searchParams);
    newParams.set('tab', key);
    setSearchParams(newParams);
  };

  return (
    <div>
      <Tabs items={items} activeKey={activeKey} onChange={handleTabChange} />
    </div>
  );
};
export default Index;
